<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">


    </div>
    <script>
        // 抽象方块类，方块的构造函数。

        function Rect(x,y,color,container){
            this.ele = null; // 方块的元素；
            this.x = x;  // 方块x轴所在的位置
            this.y = y;
            this.color = color; // 方块的颜色 ；
            this.container = container;
            this.createRect();
        }
        Rect.prototype.createRect = function(){  // 根据 方块的属性 生成对应的dom结构；
            this.ele = document.createElement("div");  // 创建方块元素
            // 设置方块元素的属性 
            this.ele.style.left = this.x + "px";
            this.ele.style.top = this.y + "px";
            this.ele.style.position = "absolute";  // 设置方块的绝对定位属性 ；
            this.ele.style.background = this.color;
            this.ele.style.border = "1px solid";
            this.ele.style.width = "50px";
            this.ele.style.height = "50px";
            // 把方块元素添加到容器里去
            this.container.appendChild(this.ele);
        }

        // var containerELe = document.querySelector(".container");
        // var rect1 = new Rect(0,0,"blue",containerELe);
        // var rect1 = new Rect(50,0,"blue",containerELe);
        // var rect3 = new Rect(100,0,"red",containerELe);





    </script>
</body>
</html>